<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="./weiqi.css">
	<script src="./weiqi.js"></script>
</head>
<style type="text/css">
	#dom {
		width: 600px;
		height: 600px;
		/*border: solid 1px red;*/
	}
</style>
<body>
<table>
	<tr>
		<td style="display: flex;">
			<table>
        <tr>
          <td>
             <button onclick="changeSize('+')">棋盘+</button>
             <br />
             <button onclick="changeSize('-')">棋盘-</button>
             <hr />
          </td>
        </tr>
        <tr>
          <td>
            路数
            <br />
            <select id="select" onchange="changeRoad()">
              <option value="19">19路</option>
              <option value="13">13路</option>
              <option value="9">9路</option>
            </select>
            <hr />
          </td>
        </tr>
				<tr>
					<td>
						<input name="sex" type="radio" onclick="fn('H')" /> 
            拿黑
            <br />
						<input name="sex" type="radio" onclick="fn('B')" /> 
            拿白
            <br />
            <input name="sex" type="radio" checked="checked" onclick="fn('C')" /> 
            交替
            <hr />
					</td>
				</tr>
        <tr>
          <td>
            <button onclick="lastStep()">上一步</button>
            <br />
            <button onclick="nextStep()">下一步</button>
            <hr />
          </td>
        </tr>
			</table>
		</td>
		<td>
      <div id="tip">黑先</div>
			<div id="dom"></div>
		</td>
	</tr>
</table>

<script type="text/javascript">

var dom = document.querySelector('#dom');
var weiqi = new WeiQi(dom);
weiqi.changeRoadNum(19);

var type = 'H';
var isAuto = false;
function fn(e) {
  if (e == 'C') {
    isAuto = true;
  } else {
    type = e;
    isAuto = false;
  }
}

function changeRoad(e) {
  // weiqi = new WeiQi(dom, select.value);
  weiqi.changeRoadNum(select.value)
}

function changeSize(e) {
  if (e == '+') {
    dom.style.width = dom.offsetWidth / 1 + 10 + 'px';
    dom.style.height = dom.offsetHeight / 1 + 10 + 'px';
    weiqi.initSize();
  } else {
    dom.style.width = dom.offsetWidth / 1 - 10 + 'px';
    dom.style.height = dom.offsetHeight / 1 - 10 + 'px';
    weiqi.initSize();
  }
}

var steps = [];

var stepNum = 0;

function nextStep() {
  if (steps.length > stepNum) {
    stepNum ++;
    var step = steps[stepNum - 1];
    weiqi.readStep(step.x, step.y, step.type);
  }
}

function lastStep() {
  if (stepNum > 0) {
    stepNum --;
    weiqi.backStep();
  }
}

weiqi.setMusic({
  go:"video/go.wav",
  eat:"video/eat.wav"
});



weiqi.onPut(function(chessman) {
  chessman.type = type;
  if (isAuto) {
    if (type == 'H') {
      type = 'B';
      tip.innerHTML = '白走';
    } else {
      type = 'H';
      tip.innerHTML = '黑走'
    }
  }
  stepNum ++;
  // 记录棋谱
  steps.push(chessman);
});

weiqi.onError(function(e) {
  console.log(e);
  stepNum --;
  steps.pop();
});


</script>
</body>
</html>